<template>
  <div class="asideBox">
    <!-- <div class="top-content">
      <i class="logo"
        ><img
          :src="`../../../static/images/logo_${
            color == 'orange' ? 'orange' : 'white'
          }.png`"
          alt=""
      /></i>
      <span>后台管理系统</span>
      <div class="menuSpread" @click.stop="$emit('input', !value)">
        <i></i>
      </div>
    </div> -->
    <div class="menuMainList">
      <el-scrollbar class="sidebarScroll" ref="scroll">
        <div class="back"></div>
        <ul class="menus">
          <li
            ref="uls"
            v-for="(item, index) in menuList"
            :key="index"
            :class="{
              active: judgeActive(item),
              open: isShowCode === item.menuCode,
            }"
            class="menuList"
          >
            <!-- ableClick: !item.children || item.children.length === 0 -->
            <div
              class="menuBox ableClick"
              @mouseenter="showSub(item, index, 'in')"
              @mouseleave="
                !(item.children && item.children.length != 0)
                  ? showSub(item, {}, 'out')
                  : null
              "
              @click="itemClick(item, index)"
            >
              <div class="leftBorderContainer">
                <div
                  class="leftBorder"
                  :class="{
                    borderActive: judgeActive(item),
                  }"
                ></div>
              </div>
              <div class="iconleft">
                <div class="imgIcon">
                  <img
                    :src="
                      item.menuIcon
                        ? `../../../static/images/siderbar/${
                            color == 'orange' ? 'orange/' : ''
                          }${
                            judgeActive(item)
                              ? item.menuIcon + '_active'
                              : item.menuIcon
                          }.svg`
                        : ''
                    "
                  />
                  <!-- ${
                          currentUrl == item.menuAddr ||
                          ($route.meta && item.menuCode === $route.meta.pCode)
                            ? 'active-'
                            : ''
                        } -->
                </div>
                <div class="icon_text">
                  {{ item.menuName ? item.menuName.slice(0, 4) : '' }}
                </div>
              </div>
              <!-- <transition name="publicTransition">
                <div
                  class="menuMame"
                  :class="{ textActive: currentUrl == item.menuAddr }"
                  v-show="!value"
                >
                  {{ item.menuName }}
                  <i
                    class="el-icon-arrow-down"
                    v-if="item.children && item.children.length != 0"
                  ></i>
                </div>
              </transition> -->
            </div>
            <template v-if="item.children && item.children.length != 0">
              <div>
                <transition>
                  <child
                    :style="{
                      top: getTop(index, menuList.length, item.children.length),
                    }"
                    class="hasHide"
                    :hide="true"
                    :menuCode="item.menuCode"
                    :menuAddr="item.menuAddr"
                    :isShowCode="isShowCode"
                    :currentUrl="currentUrl"
                    :currentSubUrl="currentSubUrl"
                    :list="item.children"
                    :left="0"
                    :close="close"
                    @click="subMeuClick"
                    @mouseleave.native="showSub(item, {}, 'out')"
                  />
                </transition>
              </div>
              <!-- <child
                :style="{
                  top: value
                    ? getTop(index, menuList.length, item.children.length)
                    : null,
                }"
                :hide="value"
                :menuCode="item.menuCode"
                :menuAddr="item.menuAddr"
                :isShowCode="isShowCode"
                :currentUrl="currentUrl"
                :currentSubUrl="currentSubUrl"
                :list="item.children"
                :left="70"
                :close="close"
                @click="subMeuClick"
                @mouseleave.native="value ? showSub(item, {}, 'out') : null"
                v-if="!value"
              /> -->
              <!-- <ul class="subMenu" v-show="item.isShow" :style="{top:getTop(index,menuList.length,item.children.length)}"> -->
              <!-- <ul
                  class="subMenu"
                  v-show="isShowCode === index"
                  :style="{ top: getTop(index, item.children.length) }"
                >
                  <li
                    class="subMenu-item"
                    v-for="(subItem, subIndex) in item.children"
                    :key="subIndex"
                    :class="{
                      subactive:
                        currentSubUrl == subItem.menuAddr ||
                        ($route.meta && subItem.menuCode === $route.meta.pCode)
                    }"
                    @click.stop="subMeuClick(subItem, subIndex, index)"
                  >
                    {{ subItem.menuName }}
                  </li>
                </ul> -->
            </template>
            <div class="subMenu-title" v-else>
              {{ item.menuName }}
            </div>
          </li>
        </ul>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import { setMenus, getMenus } from '@/assets/js/auth.js'
import { getClientRect } from '@/assets/js/utils.js'
import child from './mainAsideChild'
export default {
  name: 'mainAside',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  components: { child },
  data() {
    return {
      defaultActive: '/meetingRoom',
      isCollapse: false,
      currentIndex: null, //一级菜单，
      currentSubIndex: null, //二级菜单
      // menuList: getMenus(),
      menuList: [],
      currentUrl: '',
      currentSubUrl: '',
      scrollTop: 0,
      isShowCode: -2,
      close: false,
    }
  },
  computed: {
    color() {
      return this.$store.state.color
    },
    list() {
      return this.$store.getters.menuList || []
    },
  },
  inject: ['refresh'],
  watch: {
    $route(to, from) {
      if (to.path.lastIndexOf('/') != 0) {
        let attr = to.path.split('/')
        this.currentUrl = '/' + attr[1]
        this.currentSubUrl = this.$route.path
      } else {
        this.currentUrl = to.path
        this.currentSubUrl = ''
      }
      try {
        if (from.meta.pCode !== to.meta.pCode) {
          this.close = !this.close
        }
      } catch (error) {
        this.close = !this.close
      }
      this.getMenus()
    },
    isShowCode(v) {
      this.$emit('hover', v)
    },
    value() {
      for (let i in this.menuList) {
        if (
          this.$route.meta &&
          this.$route.meta.pCode &&
          this.menuList[i].menuCode &&
          this.$route.meta.pCode.indexOf(this.menuList[i].menuCode) > -1
        ) {
          this.isShowCode = this.menuList[i].menuCode
          break
        }
      }
    },
    list: {
      deep: true,
      handler() {
        this.getMenus()
      },
    },
  },
  methods: {
    judgeActive(item) {
      return (
        this.currentSubUrl == item.menuAddr ||
        (this.currentSubUrl != item.menuAddr &&
          this.$route.meta &&
          this.$route.meta.pCode &&
          item.menuCode &&
          this.$route.meta.pCode.indexOf(item.menuCode) > -1)
      )
    },
    toFilters(list) {
      return list.filter((item) => {
        // console.log(item.children)
        item.children && item.children.length > 0
          ? (item.children = this.toFilters(item.children))
          : null
        return item.menuKind != '2'
      })
    },
    getMenus() {
      let list = JSON.parse(JSON.stringify(this.list))
      list = list.filter(
        (item) =>
          this.currentUrl == item.menuAddr ||
          (this.$route.meta &&
            this.$route.meta.pCode &&
            item.menuCode &&
            this.$route.meta.pCode.indexOf(item.menuCode) > -1)
      )
      if (list.length > 0 && list[0].children) {
        this.menuList = this.toFilters(list[0].children)
      } else {
        this.menuList = []
      }
      // console.log(this.menuList)
    },
    indexClick() {
      this.currentUrl = ''
      this.currentSubUrl = ''
      this.$router.replace({
        path: '/reception',
      })
      this.$emit('showprogressBar') //刷新
    },
    showSub(item, index, type) {
      // console.log(type == 'out' ? -2 : item.menuCode)
      this.isShowCode = type == 'out' ? -2 : item.menuCode
    },
    itemClick(item, index) {
      this.currentIndex = item.id
      if (item.children && item.children.length != 0) {
        return false
      } else {
        if (item.menuAddr) {
          this.$store.commit('keepFn', false)
          this.showSub(item, index, 'out')
          this.$emit('showprogressBar') //刷新
          if (this.$route.path == item.menuAddr) {
            this.$emit('refrash') //刷新
          } else {
            this.$router.push(item.menuAddr)
          }
        }
      }
    },
    subMeuClick(subItem, subIndex, index) {
      // this.isShowCode = -2
      this.$set(this.menuList, index, this.menuList[index])
      this.currentSubIndex = subItem.id
      if (subItem.menuAddr) {
        this.$store.commit('keepFn', false)
        this.$emit('showprogressBar') //刷新
        if (this.$route.path == subItem.menuAddr) {
          this.$emit('refrash') //刷新
        } else {
          this.$router.push(subItem.menuAddr)
        }
      }
    },
    getTop(index, length) {
      //index,length,subLength
      if (!this.$refs.uls || this.scrollTop < 0) {
        return null
      }
      let el = this.$refs.uls[index]
      if (!el) {
        return
      }
      let top = null,
        domHeight = this.$store.state.dom.height,
        elP = getClientRect(el)
      if (elP.top + (length - 1) * 51.73 + 56 + 42 > domHeight) {
        top = domHeight - (elP.top + (length - 1) * 51.73 + 56 + 42) + 'px'
      }
      try {
        let pTop = getClientRect(document.getElementsByTagName('aside')[0]).top
        if (elP.top < pTop + 28) {
          top = pTop - elP.top + 28 + 'px'
        }
      } catch (error) {}
      return top
    },
  },
  created() {
    if (this.$route.path.lastIndexOf('/') != 0) {
      let attr = this.$route.path.split('/')
      this.currentUrl = '/' + attr[1]
      this.currentSubUrl = this.$route.path
    } else {
      this.currentUrl = this.$route.path
      this.currentSubUrl = ''
    }
  },
  mounted() {
    this.getMenus()
    this.$nextTick(() => {
      try {
        this.listener = () => {
          this.scrollTop = this.$refs.scroll.$el.firstElementChild.scrollTop
        }
        this.$refs.scroll.$el.firstElementChild.addEventListener(
          'scroll',
          this.listener
        )
      } catch (error) {}
    })
  },
  destroyed() {
    try {
      this.$refs.scroll.$el.firstElementChild.removeEventListener(
        'scroll',
        this.listener
      )
    } catch (error) {}
  },
}
</script>

<style scoped>
.asideBox {
  width: 100%;
  height: 100%;
}
.top-content {
  height: 130px;
  padding-top: 6px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}
.logo {
  display: block;
  height: 50px;
  position: relative;
  line-height: 50px;
  transition: all 0.2s ease-in-out;
}
.logo + span {
  font-size: 22px;
  font-weight: bold;
  line-height: 30px;
  white-space: nowrap;
  opacity: 1;
  transition: all 0.2s ease-in-out;
  transform: translateY(0) scaleY(1);
  display: inline-block;
}
.barSmall .logo + span {
  opacity: 0;
  transform: translateY(20%) scaleY(0.4);
}
.barSmall .logo {
  padding-top: 10px;
}
.logo > img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.menuSpread {
  width: 42px;
  height: 32px;
  border-radius: 20px 0px 0px 20px;
  position: absolute;
  right: 0;
  top: 92px;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}
.menuSpread:hover {
  transform: translateY(-1px);
}
.menuSpread > i {
  display: block;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  margin-top: -11px;
  right: 6px;
}
.menuSpread > i::before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: url('../../assets/images/siderbar/spread.png') no-repeat center
    center/100% 100%;
}
.barSmall .menuSpread {
  top: 86px;
}
.barSmall .menuSpread > i::before {
  transform: scaleX(-1);
}
.menuMainList {
  height: calc(100% - 130px);
  width: 800px;
}
.barSmall:hover .menuMainList {
  width: 800px;
}
.menus .menuList .menuBox {
  height: 100%;
}
.leftBorderContainer {
  width: 30px;
  height: 100%;
  line-height: 56px;
  transition: all 0.2s ease-in-out;
}
.barSmall .leftBorderContainer {
  width: 20px;
}
.leftBorder {
  width: 3px;
  height: 100%;
  background: transparent;
}
.iconleft {
  line-height: 56px;
  height: 100%;
  transition: all 0.2s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.leftBorderContainer,
.iconleft,
.menuMame {
  display: inline-block;
  vertical-align: top;
}
.imgIcon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 14px;
  position: relative;
  width: 20px;
  height: 20px;
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}
.barSmall .imgIcon {
  transform: scale(1);
  margin-right: 0;
}
.imgIcon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.menus {
  width: 240px;
  z-index: 999;
  padding: 4px 0;
  transition: width 0.15s ease;
}
.barSmall .menus {
  width: 60px;
}
.menus .menuList {
  position: relative;
  text-align: left;
  box-sizing: border-box;
  line-height: 56px;
  font-size: 0;
  color: #ffffff;
  white-space: nowrap;
  /* background-color: rgba(54, 71, 145, 0); */
  transition: background-color 0.2s, height 0.2s ease;
}
.barSmall .menus .menuList:hover {
  z-index: 111;
}
/* 
.menus .menuList .menuBox {
  background: transparent; 
  transition: all 0.1s ease;
}*/
/* .menus .menuList.open .menuBox {
  background-color: rgba(54, 71, 145, 0.3);
} */
/*
.menus .menuList.active .menuBox,
.menus .menuList .menuBox:hover {
  background: #364791;
  background-color: rgba(42, 58, 129, 0.56);
} */
.menus:hover .menuList .menuBox {
  transition: all 0.1s ease;
}
.menus .menuList .menuMame {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  padding-left: 4px;
}
/* ul.subMenu li.subMenu-item {
  cursor: pointer;
  padding-left: 70px;
  box-sizing: border-box;
}
ul.subMenu li.subMenu-item:last-child {
  border-bottom: 0;
}
ul.subMenu li.subMenu-item:hover,
ul.subMenu li.subMenu-item.subactive {
  box-sizing: border-box;
  background-color: #364791;
} */
.el-icon-arrow-down {
  position: absolute;
  right: 20px;
  top: 21px;
  transform: rotate(0deg);
  transition: all 0.2s ease;
}
.open .el-icon-arrow-down {
  transform: rotate(-180deg);
}

.el-scrollbar {
  height: 100%;
}
.back {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.ableClick {
  cursor: pointer;
}
.hasHide::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 18px;
}
.hasHide::after {
  content: '';
  display: block;
  position: absolute;
  top: 17px;
  left: -8px;
  width: 0;
  height: 0;
  border-right: 8px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.barSmall .menus .menuList {
  height: 56px;
}
.barSmall .menus .menuList .subMenu {
  left: 74px;
}
.subMenu-title {
  position: absolute;
  left: 74px;
  top: 13px;
  opacity: 0;
  width: auto;
  min-width: 80px;
  box-sizing: border-box;
  text-align: center;
  padding: 0 14px;
  line-height: 34px;
  height: 34px;
  font-size: 14px;
  background-color: #fff !important;
  box-shadow: 0px 2px 10px 0px rgba(226, 234, 250, 0.8);
  border-radius: 5px;
  z-index: -1;
  transform: translateX(-10px) scale(0.8);
  transition: all 0.2s;
}
.subMenu-title::after {
  content: '';
  display: block;
  position: absolute;
  top: 9px;
  left: -8px;
  width: 0;
  height: 0;
  border-right: 8px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.barSmall .menus .menuList:hover .subMenu-title {
  opacity: 1;
  z-index: 11;
  transform: scale(1);
}
/*  */
.topProgress:not(.slide-bar-enter-active)
  + .asideBg.barSmall
  .menus
  .menuList.active {
  height: 60px;
}
.topProgress:not(.slide-bar-enter-active)
  + .asideBg.barSmall
  .menus
  .menuList.active
  .iconleft {
  line-height: 42px;
}
.icon_text {
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  opacity: 0;
  transform: translateY(4px) scaleY(0.9);
  transition: all 0.2s ease 0s;
  color: #cacdd4;
}
.topProgress:not(.slide-bar-enter-active)
  + .asideBg.barSmall
  .menus
  .menuList.active
  .icon_text {
  transform: translateY(0) scale(1);
  opacity: 1;
  color: #3d7eff;
  transition: all 0.15s ease 0.05s;
}
</style>
<style>
/* .sidebarScroll > .el-scrollbar__bar.is-vertical {
  left: 191px;
  right: 0;
} */
</style>
